<div id="app" v-cloak>
	<div class="panel panel-default">
		<div class="panel-heading">
			<form action="" method="GET" class="form-inline" >
				<div class="form-group">
					<label>名称:</label>
					<input type="text" name="subject_name" class="form-control" placeholder="" v-model="params.subject_name">
				</div>
				<button type="submit" class="btn btn-default btn-sm">查找</button>
				<button type="button" class="btn btn-primary  btn-sm" onclick="openAddSubjectModal();">添加</button>
			</form>
		</div>	
		<div class="panel-body role-table-min-height">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th width="40">序号</th>
						<th width="150">分类名称</th>
						<th width="150">排序</th>
						<th width="80">状态</th>
						<th width="200">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in dataList">
						<td>{{index + 1}}</td>
						<td>{{item.subject_name}}</td>
						<td>{{item.sort}}</td>
						<td v-if="item.status_id==1">
							正常
						</td>
						<td v-else>停用</td>
						<td>
							<button type="button" class="btn btn-default" @click="editModal(item)">修改</button>
							<button type="button" class="btn btn-danger" @click="delFunc(item.id)">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="panel-footer">
		</div>
	</div>

	<!-- 添加分类 -->
	<div class="modal fade" id="addSubject">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" aria-hidden="true" onclick="closeAddSubjectModal();">&times;</button>
					<h4 class="modal-title">添加分类</h4>
				</div>
				<div class="modal-body">
					<form action="" method="POST" class="form-horizontal" role="form">
						<div class="form-group">
							<label  class="col-sm-3 control-label">名称:</label>
							<div class="col-sm-6">
							  <input type="text" class="form-control" name="subject_name" v-model="addObj.subject_name">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-3 control-label">排序:</label>
							<div class="col-sm-6">
							  <input type="text" class="form-control" name="sort" v-model.number="addObj.sort">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" onclick="closeAddSubjectModal();" >关闭</button>
					<button type="button" class="btn btn-primary" @click="addSubjectFunc">保存</button>
				</div>
			</div>
		</div>
	</div>


	<!-- 修改 -->
	
	<div class="modal fade" id="editModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" aria-hidden="true" @click="closeEditModal">&times;</button>
					<h4 class="modal-title">修改分类</h4>
				</div>
				<div class="modal-body">
					
						<form action="" method="POST" class="form-horizontal" role="form">
								<div class="form-group">
									<input type="hidden" value="editData.id">
									<label  class="col-sm-3 control-label">名称:</label>
									<div class="col-sm-6">
									  <input type="text" class="form-control" name="subject_name" v-model="editData.subject_name">
									</div>
								</div>
								<div class="form-group">
									<label  class="col-sm-3 control-label">排序:</label>
									<div class="col-sm-6">
									  <input type="text" class="form-control" name="sort" v-model.number="editData.sort">
									</div>
								</div>
								<div class="form-group">
									<label  class="col-sm-3 control-label">状态:</label>
									<div class="col-sm-6">
										<div class="radio">
											<label>
												<input type="radio" name="status_id" value="1" v-model.number="editData.status_id">正常
											</label>
											<label>
												<input type="radio" name="status_id" value="2"   v-model.number="editData.status_id">禁用
											</label>
										</div>
									</div>
								</div>
							</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" @click="closeEditModal">关闭</button>
					<button type="button" class="btn btn-primary" @click="editFun">保存</button>
				</div>
			</div>
		</div>
	</div>
	
</div>
<script type="text/javascript">
	var el=new Vue({
			el:"#app",
			data:{
				addObj:{
					subject_name:'',
					sort:10
				},
				editData:{
					status_id:2,
				},
				params:{
					subject_name:'',
					sort:10
				},
				dataList:[]
			},
			methods:{
				// 添加
				async addSubjectFunc(){
					let {data}=await this.$http.post('admin/subject/add',this.addObj);
					if(data.code==200){
						alert('添加成功');
						this.forObj(this.addObj);
						this.subjectList();
						closeAddSubjectModal();
					}else{
						alert('添加失败');
					}
				},
				// 修改
				editModal(obj){
					let tobj={};
					tobj=this.tforObj(tobj,obj);
					this.editData=tobj;
					$("#editModal").modal('show');
				},
				// 关闭
				closeEditModal(){
					$("#editModal").modal('hide');
				},
				// 更新
				async editFun(){
					let id=this.editData.id;
					let {data}=await this.$http.post('admin/subject/update/'+id,this.editData);
					if(data.code==200){
						alert('修改成功');
						this.forObj(this.addObj);
						this.subjectList();
						closeAddSubjectModal();
					}else{
						alert(data.msg);
					}
					this.closeEditModal();
					this.subjectList();
				},
				// 遍历对象，重新赋值，清空
				forObj(obj){
					for(let i in obj){
						obj[i]='';
					}
				},
				// 遍历对象，重新赋值
				tforObj(tobj,obj){
					for(let i in obj){
						tobj[i]=obj[i];
					}
					return tobj;
				},
				async subjectList(){
					let {data}=await this.$http.get('admin/subject/list',{params:this.params});
					this.dataList=data;
				},
				// 删除
				async delFunc(id){
					let flag=confirm('您确定删除吗');
					if(flag){
						let {data}= await this.$http.post('admin/subject/delete/'+id);
						if(data.code==200){
							alert('删除成功');
							this.subjectList();
						}else{
							alert(data.msg);
						}
					}
				}
			},
			mounted(){
				this.subjectList();
			},
		});
	function openAddSubjectModal(){
		$("#addSubject").modal('show');
	}

	function closeAddSubjectModal(){
		$("#addSubject").modal('hide');
	}
</script>